<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>这是第三节课</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			canvas {
				width: 500px;
				height: 500px;
				border: 1px red solid;
			}

			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;

			}
		</style>
	</head>
	<body>
		<div class="container">
			<canvas id="canvas" width="500px" height="500px"></canvas>
		</div>
	</body>

	<script>
		window.onload = function() {
			let yCanvas = document.getElementById('canvas');

			console.dir(yCanvas);

			let yPen = yCanvas.getContext("2d");

			console.dir(yPen);

			//对话框
			// yPen.lineWidth = 6;
			// yPen.strokeStyle = "#333";
			// yPen.beginPath();
			// yPen.moveTo(366, 271);
			// yPen.quadraticCurveTo(341, 346, 175, 312);
			// yPen.stroke();

			// yPen.moveTo(366, 271);
			// yPen.quadraticCurveTo(401, 161, 303, 159);
			// yPen.stroke();

			// yPen.moveTo(108, 216);
			// yPen.quadraticCurveTo(96, 122, 303, 159);
			// yPen.stroke();

			// yPen.moveTo(108, 216);
			// yPen.quadraticCurveTo(40, 316, 165, 316);
			// yPen.stroke();

			// yPen.moveTo(165, 316);
			// yPen.lineTo(170,420);
			// yPen.lineTo(175, 312);
			// yPen.stroke();



			//水滴
			yPen.beginPath();
			yPen.lineWidth = 6;
			yPen.strokeStyle = "#333";
			yPen.beginPath();
			yPen.moveTo(255, 261);
			yPen.bezierCurveTo(324, 146, 480, 319, 274, 410);
			yPen.stroke();

			yPen.beginPath();
			yPen.moveTo(255, 261);
			yPen.bezierCurveTo(177, 131, 57, 359, 274, 410);
			yPen.closePath();
			yPen.stroke();

			yPen.beginPath();
			yPen.lineWidth = 6;
			yPen.strokeStyle = "#333";
			yPen.beginPath();
			yPen.moveTo(374, 33);
			yPen.bezierCurveTo(324, 146, 480, 319, 274, 410);
			yPen.stroke();

			yPen.beginPath();
			yPen.moveTo(374, 33);
			yPen.bezierCurveTo(428, 73, 487, 189, 383, 190);
			yPen.closePath();
			yPen.stroke();





			// let datal = [{
			// 	name: '朱',
			// 	sex: '男'
			// }]

			// for (var i = 0; i < datal.length; i++) { //第一个分号前是初始值，只执行一次，第二个分号
			// 	console.dir(datal[i].name);
			// }



			// int  main(){
			// 	int sum=0;
			// 	for(int i; i <= 100; i++){
			// 		sum=i+1;
			// }
			// console.dir(sum);

		}
	</script>
</html>
